<template>
  <div class="login_page">
    <el-card class="box-card">
      <img
        class="box_img"
        src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
        alt=""
      />
      <el-form :model="form" :rules="rules" ref="loginForm" class="demo-form-inline">
        <el-form-item prop="loginName">
          <el-input
            prefix-icon="iconfont icon-phone"
            v-model="form.loginName"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="iconfont icon-look"
            class="most"
            v-model="form.password"
            placeholder="请输入密码"
            :type="isShow ? 'text' : 'password'"
          >
            <template #suffix>
              <i class="eyes" @click="isShow = !isShow" :class="isShow ? 'iconfont icon-yanjing' : 'iconfont icon-biyanjing'"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            prefix-icon="iconfont icon-security"
            v-model="form.code"
            placeholder="请输入验证码"
            maxlength="4"
          ></el-input>
          <img
            class="clientToken_img"
            @click="getVerificationImg"
            :src="verificationImg"
            alt=""
          />
        </el-form-item>
        <el-form-item>
          <el-button :loading='loading' @keydown.enter.native="onSubmit" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getClient } from '@/api/user'
export default {
  name: 'LoginPage',
  data () {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType: '0',
        clientToken: ''
      },
      loading: false, // 加载
      verificationImg: '', // 验证码
      isShow: false, // 密码是否可见
      rules: {
        loginName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 登录
    async onSubmit () {
      try {
        this.loading = true
        // 校验表单
        await this.$refs.loginForm.validate()
        // 点击登录的时候一定要加上await，需要等待
        await this.$store.dispatch('user/loginAction', this.form)
        this.$router.push('/')
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    // 验证码图片
    async getVerificationImg () {
      // 赋值
      this.form.clientToken = this.getClientToken()
      const res = await getClient(this.form.clientToken)
      // 将接口返回的图片转换一个本地的http格式的url路径
      this.verificationImg = window.URL.createObjectURL(res)
    },
    // 封装一个随机字符串函数
    getClientToken () {
      return Math.random().toString(36).substr(2)
    }
  },
  async created () {},
  mounted () {
    // 页面挂载完调用一次验证码方法
    this.getVerificationImg()
  }
}
</script>

<style lang="scss" scoped>
  .login_page {
    // position: relative;
    height: 100%;
    width: 100%;
    background: url('http://likede2-admin.itheima.net/img/background.be4fae7d.png')
      no-repeat center center/cover;
      // 卡片
    .box-card {
      overflow: visible;
      width: 518px;
      height: 388px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // 商标图
      .box_img {
        position: absolute;
        width: 96px;
        height: 96px;
        top: -48px;
        left: 50%;
        transform: translateX(-50%);
      }
      // 表单
      .el-form {
        margin-top: 60px;
        ::v-deep .el-input__inner {
          height: 52px;
        }
        // 眼睛图标
        .eyes {
          margin-right: 10px;
          display: inline-block;
          height: 100%;
          line-height: 52px;
        }
        // 验证码
        .clientToken_img {
          position: absolute;
          right: 0;
          height: 52px;
        }
        // icon图标
        ::v-deep .el-input__icon {
          line-height: 52px;
        }
        // 按钮
        .el-button {
          width: 100%;
          height: 52px;
          color: #fff;
          background: linear-gradient(262deg, #2e50e1, #6878f0);
        }
      }
    }
  }
</style>
